iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 21
0
Modern Web

試著學 Hexo系列 第 21

(21) 試著學 Hexo - NexT 主題篇 - NexT 還有哪些設定?

  • 分享至 

  • xImage
  •  

前言

接下來這一篇算是 Hexo NexT 主題的最後一篇,所以來聊聊它還有那些設定吧。

閱讀全文 More

通常如果我們沒有去做一些設置的話,首頁一進來就會預設看到文章全部內文,以 NexT 來講有三種方式可以開啟 More(閱讀更多) 這個按鈕出來

https://ithelp.ithome.com.tw/upload/images/20201004/20119486GpdoQM6ZKR.png

第一種是使用手動截斷的方式,在你想截斷的地方輸入以下就可以截斷

<!--more-->

第二種方式則是使用自動截斷的方式,打開 themes/_config.yml,然後在尾端新增

auto_excerpt:
  enable: true
  length: 100

但在這邊如果要使用自動截斷的方式的話,依照 官方說明 是必須額外安裝套件,也就是 hexo-excerpt

最後一種方式也是我目前使用的方式,使用的方式很簡單,只需要在文章欄位區塊加上 description 就可以了

---
title: 我的第一篇部落格文章
date: 2020-07-18 14:10:24
tags:
description:
---

這樣在呈現時,就會自動以你提供的 description 來隱藏其餘內容

https://ithelp.ithome.com.tw/upload/images/20201004/20119486HmRCsOKlcK.png

關閉 Powered by Hexo & NexT

以我自己來講,其實我不太喜歡這個東西,雖然通常我會關閉,你只需要搜尋 Powered by Hexo & NexTtrue 改成 false 就可以囉。

但實際上這是尊重原作者,但我自己是不喜歡這個,剛好官方又有提供,所以就...稍微提一下吧。

版權宣告 (copyright)

在 「Powered by Hexo & NexT」上方其實有一個版權宣告 copyright 的字眼,以我自己來講我會希望想轉載我文章的人可以附上原文連結,那我就會寫

# If not defined, `author` from Hexo `_config.yml` will be used.
copyright: 若要轉載文章,麻煩請保留原作者名稱與原始連結。

https://ithelp.ithome.com.tw/upload/images/20201004/201194866Ig6za22x9.png

(雖然我文章寫得很廢,都是一推筆記,但還是會希望尊重一下原本的作者,我自己在寫筆記時也都會補上我參考哪些文章而寫出來。)

footer 圖示替換

其實版權宣告的前面也可以修改其他 icon (預設是愛心),而且你也可以給予動畫效果,在這邊只需要搜尋 Icon between year and copyright info. 就可以看到相關設置,這邊我舉例改成其他 icon 並且開啟動畫效果

icon:
  # Icon name in Font Awesome. See: https://fontawesome.com/icons
  name: fab fa-accessible-icon
  # If you want to animate the icon, set it to true.
  animated: true
  # Change the color of icon, using Hex Code.
  color: "#ff0000"

接下來你應該就可以看到新的 icon 以及跳動的 icon,這邊我就不貼圖示意,讓各位自己去嘗試哩。

頭像

最後來講頭像的設置,通常頭像預設是關閉的,你只需要搜尋 Sidebar Avatar 然後將頭像圖片 url 填入就可以。

而另外兩個選項分別是 roundedrotated,一個是圓形頭像另一個則是旋轉頭像,我個人是覺得圓形比較好看,而旋轉頭像則是在使用者滑入頭像時旋轉一圈而已。

# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: /images/avatar.gif
  # If true, the avatar will be dispalyed in circle.
  rounded: true
  # If true, the avatar will be rotated with the cursor.
  rotated: true

那由於 NexT 可以設置的地方真的非常的多,所以我只介紹我有改過我目前正在使用的設置,那麼今天鐵人賽就先到這邊,我們下一篇見 :D


上一篇
(20) 試著學 Hexo - NexT 主題篇 - 可以安裝的套件
下一篇
(22) 試著學 Hexo - SEO 篇 - 先來聊聊 Url 對於 SEO 的影響
系列文
試著學 Hexo33
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言